<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="80%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="120px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="标题"
        prop="title"
        class="required label-right-align"
      >
        <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="内容"
        prop="content"
        class="required label-right-align"
      >
        <Uediter v-model="formData.content" ref="ue"></Uediter>
      </el-form-item> -->
      <el-form-item
        label="选择视频"
        prop="video"
        class="required label-right-align"
      >
        <video
          :src="formData.video"
          v-if="formData.video"
          @click.prevent.stop="showUpload"
          :style="{ width: '300px', height: '300px' }"
        ></video>
        <div @click="showUpload()" v-else class="upload-btn">+</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
    <Upload
      v-if="isUpload"
      :config="{ total: 1, file_type: 'video' }"
      @returnImgs="returnImgsFunc"
      :isupload="isUpload"
      >上传视频</Upload
    >
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import {
  ElMessage,
  UploadInstance,
  UploadProps,
  UploadRawFile,
  UploadUserFile,
} from "element-plus";
import Uediter from "@/components/UE.vue";
import { getInfoApi, addApi, editApi } from "@/api/company/workVideo";
const isUpload = ref(false);
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
const ue = ref<any>(null);
const upload = ref<UploadInstance>();
const showUpload = () => {
  isUpload.value = true;
  return false;
};
const returnImgsFunc = (e: any) => {
  if (e !== null) {
    formData.value.video = e[0].file_path;
  }
  isUpload.value = false;
};
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
const formData = ref({
  id: 0,
  title: "",
  content: "",
  video: "",
});

const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  video: [
    {
      required: true,
      message: "请选择视频",
    },
  ],
});

const emits = defineEmits(["getTable"]);
const contentChangeFunc = (e: string) => {
  formData.value.content = e;
};
function submitForm() {
  if (formRef.value) {
    formRef.value.validate().then(async () => {
      if (formData.value.id > 0) {
        await editApi(formData.value);
      } else {
        await addApi(formData.value);
      }
      ElMessage.success("保存成功");
      emits("getTable");
      dialogClose();
    });
  }
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  if (id > 0) {
    formData.value.id = id;
    dialogTitle.value = "编辑内容";
    getInfoApi(id).then((res) => {
      formData.value.title = res.data.title;
      formData.value.content = res.data.content;
      formData.value.video = res.data.video;
    });
  } else {
    dialogTitle.value = "添加内容";
  }
  dialogFormVisible.value = true;
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    title: "",
    content: "",
    video: "",
  };
  dialogFormVisible.value = false;
};

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.upload-btn {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  font-size: 30px;
  font-weight: bolder;
}
</style>
